<template>
  <zeda-dialog
    v-model="visible"
    :title="(id <= 0 ? '新增' : '编辑') + ''"
    width="500px"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      :model="model"
      :rules="rules"
      label-width="160px"
      size="small"
    >
      <el-form-item label="填报类型" prop="typeName">
        <el-input v-model="model.typeName" placeholder="请输入填报类型" />
      </el-form-item>
      <el-form-item label="用能对象别称" prop="energyObjectName">
        <el-input
          v-model="model.energyObjectName"
          placeholder="请输入用能对象别称"
        />
      </el-form-item>
      <div v-for="(item, index) in model.itemRequestList" :key="index">
        <el-form-item
          :label="index == 0 ? '用能对象类型' : ''"
          :prop="'itemRequestList.' + index + '.name'"
          :rules="rules.itemRequestList"
        >
          <el-input v-model="item.name" placeholder="请输入用能对象类型">
            <template slot="append">
              <el-button
                v-if="index == 0"
                type="primary"
                icon="el-icon-plus"
                round
                @click="addList"
              ></el-button>
              <el-button
                v-if="index > 0"
                type="danger"
                icon="el-icon-delete"
                round
                @click="handleDelete(index)"
              ></el-button>
            </template>
          </el-input>
        </el-form-item>
      </div>
      <el-form-item label="用能预算别称" prop="energyBudgetName">
        <el-input
          v-model="model.energyBudgetName"
          placeholder="请输入用能预算别称"
        />
      </el-form-item>
      <el-form-item label="用能预算单位" prop="energyUnit">
        <el-input v-model="model.energyUnit" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="是否需要标准" prop="isUseStandard">
        <el-radio-group v-model="model.isUseStandard">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="model.isUseStandard == 1"
        label="用能预算标准单位"
        prop="standardUnit"
      >
        <el-input v-model="model.standardUnit" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <form-button
      slot="footer"
      :loading="loading"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { detail, add, edit } from "@/api/configuration/declarationType";
import FormButton from "@/components/FormButton";

export default {
  components: {
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      model: {
        energyUnit: "",
        energyObjectName: "",
        energyBudgetName: "",
        typeName: "",
        isUseStandard: 0,
        itemRequestList: [
          {
            name: "",
          },
        ],
      },
      // 表单校验
      rules: {
        typeName: [
          { required: true, message: "填报类型不能为空", trigger: "blur" },
        ],
        energyUnit: [
          { required: true, message: "用能预算单位不能为空", trigger: "blur" },
        ],
        energyObjectName: [
          { required: true, message: "结束编号不能为空", trigger: "blur" },
        ],
        energyBudgetName: [
          { required: true, message: "用能预算别称不能为空", trigger: "blur" },
        ],
        itemRequestList: [
          { required: true, message: "用能对象类型不能为空", trigger: "blur" },
        ],
        standardUnit: [
          {
            required: true,
            message: "用能预算标准单位不能为空",
            trigger: "blur",
          },
        ],
        isUseStandard: [
          {
            required: true,
            message: "请选择",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    visible(value) {
      if (value) {
        if (String(this.id).length > 0) {
          this.getInfo();
        }
      }
    },
  },
  methods: {
    addList() {
      this.model.itemRequestList.push({
        name: "",
      });
    },
    // 删除
    handleDelete(index) {
      this.model.itemRequestList.splice(index, 1);
    },
    getInfo() {
      detail(this.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.model = { ...this.model, ...res.data };
          this.model.itemRequestList = res.data.itemVoList;
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!错误码317004");
        });
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            ...this.model,
          };
          this.loading = true;
          if (this.id) {
            this.editRequest(data);
          } else {
            this.addRequest(data);
          }
        } else {
          return false;
        }
      });
    },
    addRequest(data) {
      add(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("操作成功");
          this.handleClose(true);
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!错误码317002");
        });
    },
    editRequest(data) {
      edit(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("操作成功");
          this.handleClose(true);
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!错误码317003");
        });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.model.itemRequestList = [
        {
          name: "",
        },
      ];
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
